<template>
  <div style="background:#fff;border-radius: 0.1rem;">
    <div id="myChart" ref="myChart" :style="{ width: '100%', height: '3.88rem' }"></div>
  </div>
</template>
<script>
import echarts from "echarts";
import { Legend } from "highcharts";
export default {
  props: {
    readData: {
      type: Object
    }
  },
  data() {
    return {};
  },
  watch: {
    readData: {
      handler(val) {
        this.drawLine();
      },
      deep: true
    }
  },

  methods: {
    drawLine() {
      // 初始化echarts实例
      let myChart = this.$echarts.init(this.$refs.myChart);

      // 绘制图表
      myChart.setOption({
        tooltip: {
          show: false, //关闭气泡
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        //饼状图在左，图例在右
        grid: {
          top: "10%",
          left: "90%",
          bottom: "20%",
          // containLabel: true
        },
        legend: {
          data: ['抖音','APP','微博','视频号','喜马拉雅'],
          show: true,
          //legend在右下方
          right: '5%',
          bottom: '15%',
          orient: 'vertical',
          textStyle: {
            color: '#000'
          },
        },
        series: [
          {
            barWidth: "50%",
            type: "pie",
            label: {
              show: false,
              normal: {
                position: "inner",
                show: false
              }
            },
            radius: ["60%", "78%"],
            center: ["39%", "50%"],
            color: ["#11D0B6", "#01B1EE", "#A486F9", "#FFBB12", "#FFAB12"],
            data: [
              { value: 1048, name: '抖音' },
              { value: 735, name: 'APP' },
              { value: 580, name: '微博' },
              { value: 484, name: '视频号' },
              { value: 300, name: '喜马拉雅' }
            ],
          }
        ]
      });
    }
  }
};
</script>